<template>
    <div>
        <div style="position: absolute;z-index:999; top:8%;left:18%;width:64vw;height:80vh;background-color:black;overflow-y:auto;overflow-x:hidden;">
				<div>
					<el-date-picker
      					v-model="value1"
      					type="datetimerange"
						value-format="timestamp"
						@change="abcd"
      					range-separator="至"
      					start-placeholder="开始日期"
      					end-placeholder="结束日期">
    				</el-date-picker>
				</div>
                <div style="font-size:30px;position: fixed;top:8%;right:19%;z-index:99999;" @click="closeMeteorologicalss"><i class="el-icon-circle-close" style="color:white;"></i></div>
                <div v-for="(item,index) in this.qxData" :key="index">
                    <div :id="item.sensorType" style="height:200px;background-color:black;margin-bottom:20px;"></div>
                </div>
			</div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios'
export default {
    data() {
        return {
			value1: '',
        };
    },
    props: ['qxData'],
    computed: {
        
    },
    mounted() {
        // this.init()
    },
    methods: {
        closeMeteorologicalss(){
            this.$emit("closeMeteorologicals")
        },
        abcd(e){
            console.log(123123)
            this.$emit("abcds",e)
        },
        init(){
            for(var i = 0;i<this.qxData.length;i++){
                let myEchartss = echarts.init(document.getElementById(this.qxData[i].sensorType));
                let option = {
                    title: {
                        text: this.qxData[i].sensorType,
                        textStyle: {
                            color: '#fff',
                            fontSize: '18',
                        },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.qxData[i].dates,
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                            }
                        }
                    },
                    grid:{
                        top:40,
                            left:"5%",
                            width:"90%",
                            height: "55%",
                    },
                    dataZoom: [
                        {
                            show: true,
                            height: 20,
                            xAxisIndex: [0],
                            bottom: 10,
                            start: 10,
                            end: 80,
                            handleIcon:
                                'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                            handleSize: '110%',
                            handleStyle: {
                                color: '#d3dee5',
                            },
                            textStyle: {
                                color: '#fff',
                            },
                            borderColor: '#90979c',
                        },
                        {
                            type: 'inside',
                            show: true,
                            height: 15,
                            start: 1,
                            end: 35,
                        },
                    ],
                    series: [{
                        name: this.qxData[i].sensorType,
                        data: this.qxData[i].values,
                        type: 'line',
                        smooth: true
                    }]
                };
                myEchartss.setOption(option);
            }
        }
    },
	created(){
        
        },
    watch:{
        qxData: {  
　　　　    handler(newValue, oldValue) {  
　　　　　　    for (let i = 0; i < newValue.length; i++) {  
　　　　　　　　    if (oldValue[i] != newValue[i]) {
                       this.init()
　　　　　　　　    }  
　　　　　　    }  
　　　　    },  
　　　　    deep: true  
　　    }
    }
};
</script>
<style scoped>
	
</style>
